get() Svelte store value

Posted on 2023-03-31 by

Sometimes we may want to get the value of a Svelte store outside of a Svelte component.

Inside of a Svelte component it is easy, just add a dollar prefix to the store name. By doing so we automatically subscribe to the store and get its value.

Warning: this is a contrived example!

1 * 2 = 2

App.svelte store.js

<script>
	import { store, calculateDoubleValue } from "./store";
</script>

{$store} * 2 = {calculateDoubleValue(store)}

<style>
</style>

If we added the function to the Svelte component instead we can't use let $store inside of the function because stores have to be defined in the top level .

We can use _store instead and it will work!

It works!

1 * 2 = 2

App2.svelte

<script>
	import { store } from "./store";

	function calculateDoubleValue(store) {
		let _store;
		const unsubscribe = store.subscribe((value) => {
			_store = value;
		});
		unsubscribe();
		return _store * 2;
	}
</script>

{$store} * 2 = {calculateDoubleValue(store)}

<style>
</style>

There is an even easier way to get the value of a store, we simply use get() .

1 * 2 = 2

store2.js App3.svelte

import { writable, get } from "svelte/store";

export const store = writable(1);

export function calculateDoubleValue(store) {
	let $store = get(store);
	return $store * 2;
}